<template>
    <div class="box">
        <div class="header">
            购物车   <span @click="tab1()" v-if="show1">{{change}}</span> 
        </div>
        <div class="main">
            <Show>
                <ul :slot="flag">
                <van-checkbox v-model="checked" class="tit" icon-size='16px' @click="checkAll"><img src="../assets/g2.gif" alt=""> <span>东方购物自营</span> </van-checkbox>
                <van-checkbox-group v-model="result" ref="checkboxGroup" @change="tab2">
                    <div class="cart-wrap" v-for="(item,i) in prolist" :key="i"> 
                        <van-checkbox  :name="item.pid" class="spec"  >
                            <figure>
                                <div class="good-wrap">
                                    <img :src="item.pimg" alt="">
                                </div>  
                                
                                <figcaption>
                                    <h2>{{item.pname}}</h2>
                                    <div v-if="keat1"> <p><span>自营</span> <span>手机专享价</span></p>
                                    <p><em>￥{{item.pprice}}</em> <b>X {{item.pnum}}</b></p></div>
                                
                                </figcaption>
                            </figure>
                         </van-checkbox>
                         <div v-if="keat2">
                                    <ul>
                                        <li @click="jian(item.pid)">-</li>
                                        <li>{{item.pnum}}</li>
                                        <li @click="jia(item.pid)">+</li>
                                    </ul>
                                </div>
                </div>
               
            
               
                </van-checkbox-group>
                <div class="h-footer">
          <van-checkbox v-model="checked" @click="checkAll"> </van-checkbox>
          <div class="computed" v-if="keat1"><div class="left">全选 <span>明细 <van-icon name="arrow-up" /></span></div> <div class="right">应付 ￥{{sumuprice}} <em @click="sumup()">结算</em></div> </div>
          <div v-if="keat2" class="hide">
              <ul>
                  <li>
                      全选
                  </li>
                   <li>
                      移入收藏
                  </li>
                  <li @click="delate()">
                      删除
                  </li>
              </ul>
          </div>
        </div>
                </ul>
                
            </show>
            
        </div>
        
       
    </div>  
</template>



<script>
import Show from '../components/Show'
import * as api from '../../api/getproductlist'
import axios from 'axios'
export default {
    name:'Cart',
    components:{
        Show:Show
    },
    data(){
        return{
            list1:[1,2],
            flag:'',
            radio: '1',
            checked:false,
            result: [],
            c:0,
            l:0,
            keat1:true,
            keat2:false,
            change:'编辑',
            pnum:1,
            price:123,
            checkpro:[],
            show1:true,
            prolist:[],
            sumuprice:0,
        }
    },
    computed:{
        count(){
        }
    },
    methods:{
        onClickRight(){
            
        },
        delate(){
            let token=this.$store.state.tokens
           let uid=this.$store.state.uids
            
            let deleteArr=[]
           for(let i=0;i<this.checkpro.length;i++){
               deleteArr.push(this.checkpro[i])
           }
                 axios.post('http://121.199.68.97:8800/deletecarts',{
                    uid:uid,
                    pids:deleteArr
             }).then(data=>{
                 this.$toast.success('删除成功')
                   let token=this.$store.state.tokens
         let uid=this.$store.state.uids
  

    axios.get('http://121.199.68.97:8800/getcart',{
        
        params:{
            uid:uid
        },
        headers:{
            token:token
        }
    }).then(data=>{
        this.prolist=data.data.data;
        if(data.data.data.length>=1){
             this.flag='show' 
        }
        })
                 
             })  
            
          },  
            
            
            
        
        sumup(){
            let chosenArr=[]
            if(this.checkpro.length==0){
                this.$toast.fail('您没有选择任何商品')
            }else{
                for(let i=0;i<this.checkpro.length;i++){
                chosenArr.push(this.checkpro[i])
            }
            if(chosenArr.length>1){
                this.$router.push({path:'/order',query:{
                id:chosenArr,
                price:this.sumuprice

            }})
            }else{
                let obj=this.prolist.find(v=>v.pid==chosenArr[0])
                this.$router.push({path:'/order',query:{
                id:chosenArr,
                pnum:obj.pnum

            }})
            }
            
            }
            
        },
        tab2(data){
            this.checkpro=data
            let resArr=[]
            for(let i=0;i<data.length;i++){
                let obj=this.prolist.filter(v=>v.pid==data[i])
                resArr.push(obj)
            }
            let count=0
          for(let i=0;i<resArr.length;i++){
           count+=(parseInt(resArr[i][0].pprice)*parseInt(resArr[i][0].pnum))
          }
          this.sumuprice=count
           if(data.length==this.prolist.length){
               this.checked=true
           }else{
                this.checked=false
           }
            
        },
        jian(pid){
            
         let uid=this.$store.state.uids
          let obj=this.prolist.find(v=>v.pid==pid)
          if(obj.pnum==1){
              return
          }else{
              obj.pnum--
          axios.post('http://121.199.68.97:8800/updatecartpnum',{
              
            uid:uid,
                  pid:pid,
                  pnum:obj.pnum
                 
              
          }).then(data=>{
          })
          }
           
        },
        jia(pid){
         let uid=this.$store.state.uids            
          let obj=this.prolist.find(v=>v.pid==pid)
           obj.pnum++
          axios.post('http://121.199.68.97:8800/updatecartpnum',{
              
                 uid:uid,
                  pid:pid,
                  pnum:obj.pnum
                 
              
          }).then(data=>{
          })
        },
         checkAll() {
           if(this.checked==true){
                this.$refs.checkboxGroup.toggleAll();
           }else{
                this.$refs.checkboxGroup.toggleAll(true);
           }
    },
    tab1(){
        this.l++
        this.keat1=!this.keat1
        this.keat2=!this.keat2;
         this.$refs.checkboxGroup.toggleAll(false);
          if(this.l%2!==0){
                  this.change='完成'
             }else{
                  this.change='编辑'
             }
             if(this.checked==true){
                 this.checked=false
             }
    }
    },
   mounted(){
       if(this.$store.state.usernames=='注册/登录'){
           this.$toast.fail('/请登录')
           this.$router.push('/login')
       }else{
           api.getclasspro({classid:1}).then(data=>{
         this.list=data.data.data;
         
        if(this.flag!='show'){
            this.show1=false
        }else{
            this.show1=true
        }
      })

     
         let token=this.$store.state.tokens
         let uid=this.$store.state.uids
  

    axios.get('http://121.199.68.97:8800/getcart',{
        
        params:{
            uid:uid
        },
        headers:{
            token:token
        }
    }).then(data=>{
        this.prolist=data.data.data;
        if(data.data.data.length>=1){
             this.flag='show' 
        }
        })
       }
      
      

     
      
   }
}
</script>

<style scoped>
.h-footer{
    position: absolute;
    bottom: 50px;
    height: 50px;
    background: #fff;
    width: 100%;
    border-bottom: 1px solid  #f3f3f3;
    display: flex;
    align-items: center;
    padding-left: 16px;
    box-sizing: border-box;
}
.hide{
    width: 100%
}
.h-footer ul{
    display: flex;
    width: 100%
}
.h-footer ul li{
    font-size: 12px;
    width: 33%;
    text-align: center;
    box-sizing: border-box;
    height: 50px;
    line-height: 50px
}
.h-footer ul li:first-child{
    text-align: left;
    text-indent: 9px
}
.h-footer ul li:nth-of-type(2){
    border: 1px solid #f3f3f3;
    border-top: 0;
    border-bottom:0;

}
.h-footer em{
    display: inline-block;
    height: 50px;
    background:#f95339;
    width: 80px;
    color: #fff;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 2px;
    padding:16px 26px;
    box-sizing: border-box;


}
.h-footerspan{
    margin-left: 5px;
    margin-right: 97px
}
.spec{
    padding-left: 16px!important;
    border-top: 1px solid #dddddd;
}
.computed{
    position: absolute;
    left: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 88%
}
.van-checkbox-group .van-checkbox{
    padding: 15px 0 20px 0
}
figure{
    display: flex;
    position: relative
}
figure h2{
    margin-top: 3px;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 30px
}
figure em{
    color: red;
    font-style: normal;
    display:inline-block;
    margin-top: 5px;
    font-size: 14px;
    font-weight: 600;
    margin-right: 130px
}
.cart-wrap{
    position: relative;
}
.cart-wrap ul{
    border: 1px solid #ddd;
    display: flex;
    border-radius: 4px;
    margin-top:50px;
    width: 180px;
    position: absolute;
    height: 20px!important;
    top: 40px;
    right: 20px;
}
.cart-wrap ul  li{
    width: 33%;
    text-align: center;
   
    height: 20px;
    line-height: 20px 
}
.cart-wrap ul  li:nth-of-type(2){
    border: 1px solid #ddd;
    border-top: 0;
    border-bottom:0;
}
figure span{
    padding:1px 3px;
    display:inline-block;
    background:#fff1f4;
    color:#e73a20;
    font-size: 11px  
}
.good-wrap{
    width: 100px;
    height: 100px;
    border: 1px solid  #ddd;
    margin-left: 10px;
    margin-right: 15px
}
.good-wrap img{
    width: 100%;
    height: 100%;
}
.tit{
    height: 46px;
    line-height: 46px;
    font-size: 15px;
    padding-left: 16px;

}
.van-radio__label{
    display: flex;
    align-items: center;
    display: block;
    overflow: hidden;
    height: 30px;
    line-height: 30px
}
.tit img{
    height: 20px;
    margin-left: 10px;
    float: left;
    margin-right: 10px
}
.main ul{
    background: #fff;
    height: 100%;
}
.empty{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
}
.empty img{
    width: 280px
}
.empty p{
    height: 30px;
    line-height: 30px;
    font-size: 14px
}
.empty span{
    font-size:14px;
    color: #d82020;
    margin-top: 20px 
}
.box{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header{
    height: 46px;
    line-height: 46px;
    text-align: center;
    font-size: 14px;
    background: #fff;
    position: fixed;
    width: 100%;
    z-index: 100;
}
.header span{
    position: absolute;
    right: 20px;
}
h2,p,h1,figure{
    margin: 0
}
.main{
    min-height: 250px;
    margin-top: 10px;
    padding-top: 46px
}


.more-goods-con .more-good-wrap{
   width: 100%;
   height: 130px;
   margin-top: 15px;
   margin-bottom: 15px
}
.more-goods-con .more-good-wrap img{
   display: inline-block;
     width: 100%;
   height: 100%;
   background: red
}
.more-goods-con {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.more-goods-con li h3,p{
   margin: 0
}
.more-goods-con li p{
   width: 100%;
   text-align: left;
   color: red;
   font-size: 12px;
   height: 30px;
}
.more-goods-con li h3{
     width:100%;
    word-break:break-all;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-weight: normal;
    color: #323232;
    margin-bottom: 10px
}
.more-goods-con li{
   width: 50%;
   border: 1px solid #f3f3f3;
   height: 230px;
   padding: 10px 6px;
   box-sizing: border-box;
   border-right:0;
   margin-top:-1px ;
   display: flex;
   flex-direction: column;
   align-items: center;
  justify-content:start;
  padding-bottom: 0
}
.more-goods-con li:nth-child(odd){
   border-left:0 
}
</style>